<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<title>Laurel Merry Christmas</title>
	<!-- for dev -->
	<!-- <link rel="stylesheet" href="src/css/christmas.css">
	<link rel="stylesheet" href="src/css/animate.css"> -->

	<!-- for pro -->
	<link rel="stylesheet" href="dist/css/app.css">
	<link rel="stylesheet" href="src/css/animate.css">
</head>
<body>
	<section class="loading-mask">
		<section class="loading">
			<div class="progress">
				<div class="progres-bar"><i class="icon-car"></i></div>
			</div>
			<p class="loading-text">努力加载中...</p>
		</section>

		<!-- end loading -->
		<a href="javascript:;" class="playBgMusic animate-notifylight" id="j-playBgMusic">进入</a>
		<img src="./src/images/resources/15.jpg" alt="" class="a0 fadeIn animated">
		<img src="./src/images/resources/1.jpg" alt="" class="a1 bounceInDown animated">
		<img src="./src/images/resources/10.jpg" alt="" class="a10 animated rollIn">
		<img src="./src/images/resources/11.jpg" alt="" class="a11 animated bounceInDown">
		<img src="./src/images/resources/12.jpg" alt="" class="a12 bounceInLeft animated">
		<img src="./src/images/resources/7.jpg" alt="" class="a17 animated bounceInRight">
	</section>

	<section class="page out">
		<section class="content">
			<!-- animate class bigSnow-smallPos -->
			<section class="bigSnow-panel j-bigSnow animate-bigSnowRotate transition">
				<i class="img-bigSnow snow1 animate-bigSnow1Change transition"></i>
				<i class="img-bigSnow snow2 animate-bigSnow2Change transition"></i>
				<i class="img-bigSnow snow3 animate-bigSnow3Change transition"></i>
			</section>
			<!-- end bigSnow-panel -->

			<div class="banner-panel j-banner opacity0 animated">
				<!-- animate class show -->
				<span class="textMask mask1 j-textmask1"><i class="transition"></i></span>
				<span class="textMask mask2 j-textmask2"><i class="transition"></i></span>
				<span class="textMask mask3 j-textmask3"><i class="transition"></i></span>
				<i class="img-glove animate-gloveSwing"></i>
			</div>

			<i class="img-tree left opacity0 transition tn j-tree-left"></i>
			<i class="img-tree right opacity0 transition tn j-tree-right"></i>
			<!-- end trees -->

			<section class="bag-panel opacity0 animated j-bag">
				<i class="img-gift gift1 j-gift1 opacity0 animated"></i>
				<i class="img-gift gift2 j-gift2 opacity0 animated"></i>
				<i class="img-gift gift3 j-gift3 opacity0 animated"></i>
			</section>
			<!-- end bag-panel -->

			<i class="img-stars opacity0 animated j-stars"></i>
			<i class="content-bg opacity0 animated j-bottomBg"></i>
		</section>
	<section class="showText  tada">
		<p id="text"></p>
	</section>
		<!-- end content -->
	</section>

	<audio id="bgmusci" preload="load" loop="loop"><source src="main.mp3" type="audio/mpeg" /></audio>
	<div id="audio"></div>
	<script src="src/js/zepto-min.js" defer="defer"></script>
	<script src="src/js/snowstorm.js" defer="defer"></script>
	<script src="src/js/christmas.js" defer="defer"></script>
	<script  defer="defer">
	
	window.onload=function(){

	var p="<p style='font-size:12px;' id='typies'>最美的圣诞节祝福给你！<br>今天是 2018年12月25日！<br>"+
"当冬日的雪花摇曳着，<br>"+
"在黑夜中飘落时，<br>"+
"我听到了，<br>"+
"从远处飘来的圣诞铃声。<br>"+
"圣诞之夜的天空，<br>"+
"星星点点，银白的世界，<br>"+
"流动着一首古老的歌：<br>"+
"平安夜，圣诞夜。<br>"+
"…… ……<br>"+
"无数个圣诞的祝福，那友谊，厚厚积累的愉快记忆，<br>"+
"人间的亲情，天堂的温馨，终于带给了我们大家。<br> "+
"一份不渝的友谊，挚着千万个祝福，给我想念的朋友，温声地问侯：圣诞快乐！<br>"+
"好友平安、幸福，将这份“超重”的祝福，送给最特别的朋友，圣诞快乐 <br>"+
"献上我无限的祝福之意，祝福你不论何时何地，不论在何处，<br>"+
"我都愿意让你知道，我深深地为你祝福，圣诞快乐！<br> "+
	"愿你的圣诞充满温馨，祥和，与亲人团聚的快乐，祝圣诞快乐，新年乐无限。<br></p>";
var ttsText="最美的圣诞节祝福给你！今天是 2018年12月25日！当冬日的雪花摇曳着，在黑夜中飘落时，我听到了，从远处飘来的圣诞铃声。圣诞之夜的天空，星星点点，银白的世界，流动着一首古老的歌：平安夜，圣诞夜。…… …… 无数个圣诞的祝福，那友谊，厚厚积累的愉快记忆，人间的亲情，天堂的温馨，终于带给了我们大家。一份不渝的友谊，挚着千万个祝福，给我想念的朋友，温声地问侯：圣诞快乐！好友平安、幸福，将这份“超重”的祝福，送给最特别的朋友，圣诞快乐 !献上我无限的祝福之意，祝福你不论何时何地，不论在何处，我都愿意让你知道，我深深地为你祝福，圣诞快乐！愿你的圣诞充满温馨，祥和，与亲人团聚的快乐，祝圣诞快乐，新年乐无限。"
	document.querySelector("#j-playBgMusic").addEventListener("click", function(){
		setTimeout(function(){
			doTTS(ttsText)
$(".showText").css("display","block").animate(
	{width:"80%"},"slow",function(){
		$("#text").html(p)

		 let a=	new TypeIt('#typies', {
  speed: 75,
  startDelay: 900
});
console.log(a)
	})
		}, 12000)



	}, false)
	function doTTS(ttsText){
      // 这样就可实现播放内容的替换了
      var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
      var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text='+ttsText+'" type="audio/mpeg">';
      var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
      var au2 = '</audio>';
      $('#audio').html(au1 + sss + eee + au2);
      var ttsAudio = document.getElementById('tts_autio_id');
      ttsAudio.play();
    }
	
}
	window.onerror=function(e){
		alert(e)
		return true;
	}
	</script>
	
</body>
<script src="https://cdn.bootcss.com/typeit/5.10.7/typeit.min.js"></script>
</html>